<style lang="scss" scoped>
  .form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .el-form-item {
      width: 300px;
    }
  }
</style>
<template>
  <page-box>
    <div class="ui-search-box" slot="search-form">
      <el-form class="ui-search-form" label-width="120px" :model="params" ref="form">
<!--        <el-form-item label="任务名称" prop="jobName">-->
<!--          <el-input size="mini" class="ui-item-reset" v-model="params.jobName" clearable></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="任务分组" prop="jobGroup">-->
<!--          <el-input size="mini" class="ui-item-reset" v-model="params.jobGroup" clearable></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="每页数据">
          <el-select size="mini" class="ui-item-reset" v-model="params.pageSize">
            <el-option label="5" :value="5"></el-option>
            <el-option label="10" :value="10"></el-option>
            <el-option label="20" :value="20"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="ui-search-btus">
        <el-button type="primary" size="mini" @click="getData">搜索</el-button>
        <el-button size="mini" @click="resetForm('form')">重置</el-button>

      </div>
    </div>
    <div class="ui-list ui-box" slot="list-box">
      <div class="box-header ui-list-header">
        <div>任务列表</div>
        <div>
          <el-dialog title="上传" :visible.sync="flag" width="20%">
              <el-upload
                class="upload-demo"
                ref="upload"
                :action="'/pms_api/cos/upload'"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                :limit="1"
                :auto-upload="true">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<!--                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
              </el-upload>
          </el-dialog>
          <el-button slot="trigger" size="small" type="primary" @click="upload">上传</el-button>
        </div>
      </div>
      <el-table :data="dataList" :cell-style="cellStyle"
                :header-cell-style="rowClass" v-loading="tabLoading">
<!--        <el-table-column prop="jobName" label="任务名称"></el-table-column>-->
<!--        <el-table-column prop="jobGroup" label="任务分组"></el-table-column>-->
<!--        <el-table-column prop="cronExpression" label="corn表达式"></el-table-column>-->
        <el-table-column prop="invokeParam" label="上传文件类型(例子)" ></el-table-column>
        <el-table-column prop="remark" label="备注" width="350px"></el-table-column>
        <el-table-column prop="startTime" label="启动时间" ></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-check" circle size="mini" v-if="scope.row.status==1"></el-button>
            <el-button type="danger" icon="el-icon-close" circle v-else size="mini"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="start(scope.row)">启动</el-button>
            <el-button size="mini" type="info" @click="paused(scope.row)">暂停</el-button>
<!--            <el-button size="mini" type="success" @click="changeFlag(scope.row)">修改</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="ui-pagination"
        @current-change="changPageNum"
        layout="total, prev, pager, next"
        :current-page="this.params.pageNum"
        :page-size="this.params.pageSize"
        :total="total">
      </el-pagination>
      <el-dialog title="修改任务" :visible.sync="quartzFlag" width="30%">
        <div class="ui-box leave_dialog">
          <el-form :model="quartzItem" label-width="150px" ref="form" class="form" :rules="formRule">
            <el-form-item label="cron表达式" prop="cronExpression">
              <el-input v-model="quartzItem.cronExpression" size="mini"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="quartzFlag = false" size="mini">取 消</el-button>
            <el-button type="primary" @click="updateQuartz" size="mini">确 定</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </page-box>
</template>
<script>
  import pageBox from '@/components/pageBox'
  export default {
    name: 'quartzList',
    components: {
      pageBox
    },
    data() {
      return {
        dataList: [],
        params: {
          quartzId: '',
          jobName: '',
          jobGroup: '',
          startTime: '',
          cronExpression: '',
          invokeParam: '',
          status: '',
          remark: '',
          pageNum: 1,
          pageSize: 10
        },
        tabLoading: false,
        quartzItem: {
          quartzId: '',
          jobName: '',
          jobGroup: '',
          startTime: '',
          cronExpression: '',
          invokeParam: '',
          status: '',
          remark: '',
        },
        total: 0,
        flag: false,
        quartzFlag:false,
        formRule: {
          cronExpression: [{required: true, message: '请输入cron表达式', trigger: 'blur'}],
        },
      }
    },
    created() {
      this.getData()
    },
    methods: {
      updateQuartz(){
        post('/pms_api/quartz/updateJob', this.quartzItem).then(res => {
          this.quartzFlag = false
          this.getData()
          if (res.code === 200) {
            this.$message({
              message: '修改成功',
              type: 'success'
            });
          }
          this.tabLoading = false
        }).catch(err => {
          this.$message.error('修改失败');
          this.tabLoading = false
          console.log(err)
        })
      },
      changeFlag(item){
        this.quartzFlag=true
        this.quartzItem = item
        console.log(item)
      },
      upload(){
        this.flag = true
      },
      //上传成功后获取文件ID
      uploadSuccess(res, file, fileList){
        console.log(file)
        this.$message({
          message: '上传成功',
          type: 'success'
        });
        // this.dialogImageUrl = res.data
        // this.$emit('changeImgSrc',this.index,this.dialogImageUrl);
        this.flag = false
      },
      //上传失败
      uploadError(err, file, fileList){
        console.log(file)
        console.log(err)
        this.$message.error('上传失败')
        this.flag = false
      },
      start(item) {
        post('/pms_api/quartz/resumeJob', {'quartzId': item.quartzId}).then(res => {
          this.getData()
          if (res.code === 200) {
            this.$message({
              message: '启动成功',
              type: 'success'
            });
          }
          this.tabLoading = false
        }).catch(err => {
          this.$message.error('启动失败');
          this.tabLoading = false
          console.log(err)
        })
      },
      paused(item) {
        post('/pms_api/quartz/pauseJob', {'quartzId': item.quartzId}).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '暂停成功',
              type: 'success'
            });
          }
          this.getData()
          this.tabLoading = false
        }).catch(err => {
          this.$message.error('暂停失败');
          console.log(err)
          this.tabLoading = false
        })
      },
      changPageNum(val) {
        this.params.pageNum = val
        this.getData()
      },
      getData() {
        post('/pms_api/quartz/list', this.params).then(res => {
          this.dataList = res.data
          this.total = res.totalPages
          this.tabLoading = false
        }).catch(err => {
          this.tabLoading = false
          console.log(err)
        })
      },
      checkDetail(item) {
        this.$router.push({
          path: '/quartzDetail',
          query: {
            quartzId: item.quartzId
          }
        })
      },
      deleteItem(item) {
        post('/pms_api/quartz/deleteJob', {'quartzId': item.quartzId}).then(res => {
          this.getData()
        }).catch(err => {
          console.log(err)
          this.tabLoading = false
        })
      },
      handleSelectionChange(val) {
        this.exportquartzList = val
      },
      //表格居中
      cellStyle({row, colum, rowIndex, columIndex}) {
        return "text-align: center";
      },
      rowClass({row, rowIndex}) {
        return "text-align: center";
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.getData()
      },
    }
  }
</script>


